<template>
    <vxe-modal v-model="userManagerStore.isShowEditModel"
        :loading="isModelLoading"
        :min-width="500"
        :width="800"
        :height="400"
        esc-closable
        show-footer
        title="编辑用户信息">
        <vxe-form
            ref="formRef"
            border
            title-background
            title-align="left"
            title-width="110"
            title-overflow
            :data="userManagerStore.editFormData">

            <!-- 用户编号 -->
            <vxe-form-item title="用户编号"
                field="userId"
                span="12"
                :item-render="{}"
                :title-prefix="{ content: '用户在系统中的唯一编号', icon: 'vxe-icon-num-list' }">
                <template #default>
                    <vxe-input
                        v-model="userManagerStore.editFormData.userId"
                        placeholder="用户编号"
                        disabled>
                    </vxe-input>
                </template>
            </vxe-form-item>

            <!-- 用户名称 -->
            <vxe-form-item title="用户名称"
                field="userName"
                span="12"
                :item-render="{}"
                :title-prefix="{ content: '用户名称', icon: 'vxe-icon-user' }">
                <template #default>
                    <vxe-input v-model="userManagerStore.editFormData.userName" />
                </template>
            </vxe-form-item>

            <!-- 用户账号 -->
            <vxe-form-item title="账号"
                field="account"
                span="12"
                :item-render="{}"
                :title-prefix="{ content: '用户的登录账号', icon: 'vxe-icon-unlock' }">
                <template #default>
                    <vxe-input v-model="userManagerStore.editFormData.account"
                        disabled>
                    </vxe-input>
                </template>
            </vxe-form-item>

            <!-- 所属机构 -->
            <vxe-form-item title="所属机构"
                field="orgInfo"
                span="12"
                :item-render="{}"
                :title-prefix="{ content: '用户所属的机构', icon: 'vxe-icon-flow-branch' }">
                <template #default>
                    <vxe-select v-model="userManagerStore.editFormData.orgId"
                        placeholder="请选择机构"
                        clearable
                        filterable>
                        <vxe-option v-for="item in userManagerStore.orgInfoList"
                            :key="item.orgId"
                            :value="item.orgId"
                            :label="item.orgName" />
                    </vxe-select>
                </template>
            </vxe-form-item>

            <!-- 用户邮箱 -->
            <vxe-form-item title="用户邮箱"
                field="userEmail"
                span="12"
                :item-render="{}"
                :title-prefix="{ content: '用户邮箱信息', icon: 'vxe-icon-envelope' }">
                <template #default>
                    <vxe-input
                        v-model="userManagerStore.editFormData.userEmail">
                    </vxe-input>
                </template>
            </vxe-form-item>
        </vxe-form>

        <template #footer>
            <vxe-button style="margin-left: 10px;"
                @click="cancelEdit"
                icon="vxe-icon-undo">
                取消
            </vxe-button>
            <vxe-button
                status="primary"
                icon="vxe-icon-save"
                @click="submitForm">
                保存
            </vxe-button>
        </template>
    </vxe-modal>
</template>

<script setup lang="ts">
import {useUserManagerStore} from "@/store/UseUserManagerStore.ts";
import MessageUtils from "@/utils/MessageUtils.ts";
import {ref} from "vue";

const userManagerStore = useUserManagerStore();
const isModelLoading = ref(false);

const cancelEdit = () => {
    userManagerStore.isShowEditModel = false;
};

const submitForm = () => {
    isModelLoading.value = true;
    userManagerStore.updateUserInfo().catch((reason) => {
        MessageUtils.showErrorMessage(reason.message);
    }).finally(() => {
        userManagerStore.isShowEditModel = false;
        isModelLoading.value = false;
    });
};
</script>
